import React, { Component } from 'react';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import { TouchableOpacity, View, StyleSheet, Alert, Image, ActivityIndicator } from 'react-native';
import { Icon, List, ListItem, Button, FormInput, CheckBox } from 'react-native-elements';
import Loader from './widgets/Loader';
import RefreshScrollView from './widgets/RefreshScrollView';
import { executor, primaryColor, toast, uploadImage } from './utils';

class SendSMSPage extends Component {
  static navigationOptions = ({screenProps, navigation}) => {
    return {
      title: `Send SMS`
    };
  }
  onSend = (message) => {
    Alert.alert(
      `Send To Cusomter`,
      message,
      [
        {text: 'Cancel'},
        {text: 'Sned', onPress: () => {
          executor(this.props.sendSMS, message)
            .then(({res}) => {
              if (res) {
                toast('Message sent');
              }
            });
          toast('Sending ...');
          this.props.navigation.goBack();
        }},
      ],
      { cancelable: true }
    );
  }
  render() {
    if (this.props.loading) return <Loader/>;

    return (
      <RefreshScrollView refetch={this.props.refetch}>
        <List>
          {this.props.remarks&&this.props.remarks.map((remark, index) =>
            <ListItem key={index} titleNumberOfLines={3} title={remark.description} onPress={()=>this.onSend(remark.description)}/>
          )}
        </List>
      </RefreshScrollView>
    );
  }
}

export default compose(
  graphql(gql`
    query SendSMSPage {
      remarks(type:"logistictemplate") {
        id
        description
      }
    }
  `, {
    props: ({data:{remarks, loading, refetch}}) => {
      return {
        refetch,
        remarks,
        loading
      };
    }
  }),
  graphql(gql`
    mutation sendSMS($orderId:String,$message:String!) {
      sendSMS(orderId:$orderId,message:$message)
    }
  `, {
    name: 'sendSMS',
    props: ({ownProps:{navigation:{state:{params:{orderId}}}}, sendSMS}) => {
      return {
        sendSMS: (message) => sendSMS({variables:{message, orderId}})
      };
    }
  })
)(SendSMSPage);

